<template>

  <div class="mainBg">
    <div style="margin-bottom: 35px;">
      <h1 style="left: 50%;position: absolute;">压缩空气系统图</h1>
      <Row style="float: right;margin-top: 6px">
        <Col span = "24" style="text-align: right;">
          <Button type="primary" @click="showAlarmPanel" size="small">报警数据</Button>
          <Button type="primary" @click="showWarnValueModal" size="small">报警阀值</Button>
          <RadioGroup v-model="warnVoice" type="button" size="small" @on-change="makeWarnVoice">
            <Radio label="允许警报"></Radio>
            <Radio label="屏蔽警报"></Radio>
          </RadioGroup>
        </Col>
      </Row>
    </div>
    <audio id="mmff" :src="voiceUrl" hidden loop="loop"></audio>
    <div class="cann" id="qtcanvas" />
    <Spin size="large" fix v-if="switches.loadImgStatus"></Spin>
    <Drawer :title="drawerObj.name?drawerObj.name : '数据属性'" :closable="true" v-model="propertiesDrawer" :mask="false" @on-visible-change="drawerStatusChange" width="300" :styles="proDrawer">
      <Card dis-hover :bordered="false" :padding="0">
        <!--SimpleSwitchDevGeneralModbusRTU 冷却塔 类型控制显示模块fdfd-->
        <div v-show="contollType == 'SimpleSwitchDevGeneralModbusRTU'">
          <Row style="text-align: center" class="towTail">
            <p>控制模块</p>
          </Row>
          <div style="padding: 5px;">
            <CellGroup>
              <Cell title="控制模式">
                <span slot="extra" style="font-size: 14px;">{{drawerDataChange.model === 'N/A' ? 'N/A' :
                (drawerDataChange.model === 1 ? '远程': '就地')}}</span>
              </Cell>
              <Cell title="启动指令">
                <Button slot="extra" type="primary" size="small" style="width: 60px;" :loading="TowerCtrl.sendOpenStatus"
                        @click="lengQueBengOpe('open')" :disabled="drawerDataChange.model === 0 || drawerDataChange.run === 1 || drawerDataChange.error === 1">启动
                </Button>
              </Cell>
              <Cell title="停止指令">
                <Button slot="extra" type="primary" size="small" style="width: 60px;" :loading="TowerCtrl.sendStopStatus"
                        @click="lengQueBengOpe('close')" :disabled="drawerDataChange.model === 0 || drawerDataChange.run === 0 || drawerDataChange.error === 1">停止
                </Button>
              </Cell>
              <Cell title="设备状态">
                <span slot="extra" style="font-size: 14px;">{{drawerDataChange.run == 'N/A' ? 'N/A' :
                (drawerDataChange.error == 1 ? '设备故障': (drawerDataChange.run == 0? '停止': (drawerDataChange.run == 1? '运行': 'illogical')))}}</span>
              </Cell>
            </CellGroup>
          </div>
        </div>
        <!-- 通用开关(双道启停) DbChannelSwitchDevGeneralModbusRTU界面-->
        <div v-show="contollType == 'DbChannelSwitchDevGeneralModbusRTU'">
          <Row style="text-align: center" class="towTail">
            <p>控制模块</p>
          </Row>
          <div style="padding: 5px;">
            <CellGroup>
              <Cell title="控制模式">
                <span slot="extra" style="font-size: 14px;">{{drawerDataChange.model === 'N/A' ? 'N/A' : (drawerDataChange.model >1 || drawerDataChange.model < -1 ? 'illogical': (drawerDataChange.model === 1 ? '远程': '就地'))}}</span>
              </Cell>
              <Cell title="启动指令">
                <Button slot="extra" type="primary" size="small" style="width: 80px;"
                        :loading="LengGanJiCtrl.sendOpenStatus"
                        @click="lengGanJiOpe('openByRemote')"
                        :disabled="drawerDataChange.model === 0 || drawerDataChange.run === 1 ||
                        drawerDataChange.error === 1 || drawerDataChange.model >1 || drawerDataChange.model < -1">
                  远程启动
                </Button>
              </Cell>
              <Cell title="停止指令">
                <Button slot="extra" type="primary" size="small" style="width: 80px;"
                        :loading="LengGanJiCtrl.sendStopStatus"
                        @click="lengGanJiOpe('closeByRemote')"
                        :disabled="drawerDataChange.model === 0 || drawerDataChange.run === 0 || drawerDataChange.error === 1 || drawerDataChange.model >1 || drawerDataChange.model < -1">
                  远程停止
                </Button>
              </Cell>
              <Cell title="设备状态">
                <span slot="extra" style="font-size: 14px;">{{drawerDataChange.run == 'N/A' ? 'N/A' :
                (drawerDataChange.error == 1 ? '设备故障': (drawerDataChange.run == 0? '停止': (drawerDataChange.run == 1? '运行': 'illogical')))}}</span>
              </Cell>
            </CellGroup>
          </div>
        </div>
        <!--进气进水电动阀 SimpleValveDevGeneralModbusRTU控制界面-->
        <div v-show="contollType == 'SimpleValveDevGeneralModbusRTU'">
          <Row style="text-align: center" class="towTail">
            <p>控制模块</p>
          </Row>
          <div style="padding: 5px;">
            <CellGroup>
              <!-- <Cell title="控制模式">
                <Switch v-model="drawerDataChange.model" slot="extra" size="large" :true-value="1" :false-value="0"
                        :disabled="true">
                  <span slot="open">系统</span>
                  <span slot="close">就地</span>
                </Switch>
              </Cell>-->
              <Cell title="开指令">
                <Button slot="extra" type="primary" size="small" style="width: 80px;"
                        :loading="FaMenCtrl.sendOpenStatus"
                        @click="DianDongFaOpe('startOpen')"
                        :disabled="drawerDataChange.open === 1 || drawerDataChange.opening === 1 ||
                        drawerDataChange.closing === 1 || drawerDataChange.open > 1 || drawerDataChange.open < -1">
                  开输出
                </Button>
              </Cell>
              <Cell title="停开指令">
                <Button slot="extra" type="primary" size="small" style="width: 80px;"
                        :loading="FaMenCtrl.sendStopOpenStatus"
                        @click="DianDongFaOpe('stopOpen')"
                        :disabled="drawerDataChange.opening === 0 || drawerDataChange.open === 1 ||
                        drawerDataChange.close === 1 || drawerDataChange.opening > 1 || drawerDataChange.opening < -1">
                  停开输出
                </Button>
              </Cell>
              <Cell title="关指令">
                <Button slot="extra" type="primary" size="small" style="width: 80px;"
                        :loading="FaMenCtrl.sendStopStatus"
                        @click="DianDongFaOpe('startClose')"
                        :disabled="drawerDataChange.close === 1 || drawerDataChange.closing === 1 ||
                        drawerDataChange.opening === 1 ||
                        drawerDataChange.close > 1 || drawerDataChange.close < -1">
                  关输出
                </Button>
              </Cell>
              <Cell title="停关指令">
                <Button slot="extra" type="primary" size="small" style="width: 80px;"
                        :loading="FaMenCtrl.sendStopCloseStatus"
                        @click="DianDongFaOpe('stopClose')"
                        :disabled="drawerDataChange.closing === 0 || drawerDataChange.open === 1 ||
                        drawerDataChange.close === 1 || drawerDataChange.closing > 1 || drawerDataChange.closing < -1">
                  停关输出
                </Button>
              </Cell>
              <!-- <Cell title="设备状态">
                <span slot="extra" style="font-size: 14px;">{{drawerDataChange.error == 1? '设备故障': (drawerDataChange.run == 0? '停止': '运行')}}</span>
              </Cell>-->
            </CellGroup>
          </div>
        </div>
        <!--冷却泵变频器 TransducerCtrDevGeneralModbusRTU 控制界面-->
        <div v-show="contollType == 'TransducerCtrDevGeneralModbusRTU'">
          <Row style="text-align: center" class="towTail">
            <p>冷却泵变频器</p>
          </Row>
          <CellGroup>
            <Cell title="设备状态">
              <span slot="extra" style="font-size: 14px;">{{drawerDataChange.run == 'N/A' ? 'N/A' : (drawerDataChange.run == 1 ? '运行': '备妥')}}</span>
            </Cell>
            <Cell title="输出频率">
              <p slot="extra">{{drawerDataChange.freq}}   Hz</p>
            </Cell>
            <Cell title="给定频率">
              <InputNumber size="small" :max="500" :min="0" slot="extra" style="width: 60px;margin-right: 10px;height:
               25px;" v-model="controllModel.param"></InputNumber>
              <Button style="width: 60px;" slot="extra" :loading="sendLoaading" type="primary" size="small"
                      :disabled="drawerDataChange.freq == controllModel.param" @click="sendOrderWithParam">发送</Button>
            </Cell>
            <Cell title="停止">
              <Button slot="extra" :loading="controllModel.sendStopOrderLoading" type="primary" size="small" style="width: 60px;"
                      @click="sendOrderToStopForFreq()">停止
              </Button>
            </Cell>
          </CellGroup>
        </div>
        <!--LOGO 控制 EndmostCtrlDev 控制界面-->
        <div v-show="contollType == 'EndmostCtrlDev'">
          <Row style="text-align: center" class="towTail">
            <p>控制模块</p>
          </Row>
          <div style="padding: 5px;">
            <CellGroup>
              <Cell title="控制模式">
                <!--<Switch v-model="drawerDataChange.model" slot="extra" size="large" :true-value="1" :false-value="0"
                        :disabled="true">
                  <span slot="open">手动</span>
                  <span slot="close">自动</span>
                </Switch>-->
                <Button slot="extra" :loading="logoCtrl.sendLoaading11" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo('', 'auto', 11)">自动
                </Button>
              </Cell>
              <Cell title="远程开阀">
                <Button slot="extra" :loading="logoCtrl.sendLoaading7" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo('', 'open', 7)">开阀
                </Button>
              </Cell>
              <Cell title="远程关阀">
                <Button slot="extra" :loading="logoCtrl.sendLoaading8" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo('', 'close', 8)">关阀
                </Button>
              </Cell>
              <Cell title="阀门复位">
                <Button slot="extra" :loading="logoCtrl.sendLoaading9" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo('', 'reset', 9)">复位
                </Button>
              </Cell>
              <Cell title="工作压力设定">
                <InputNumber size="small" slot="extra" :step="0.001"
                             style="width: 60px;margin-right: 10px;height: 25px;"
                             v-model="logoCtrl.press"></InputNumber>
                <Button slot="extra" :loading="logoCtrl.sendLoaading1" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo(logoCtrl.press, 'setPress', 1)">发送
                </Button>
              </Cell>
              <Cell title="压力特高报警">
                <InputNumber size="small" slot="extra" :step="0.001"
                             style="width: 60px;margin-right: 10px;height: 25px;"
                             v-model="logoCtrl.pressTopHigh"></InputNumber>
                <Button slot="extra" :loading="logoCtrl.sendLoaading2" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo(logoCtrl.pressTopHigh, 'setPressUpUp', 2)">发送
                </Button>
              </Cell>
              <Cell title="压力超高报警">
                <InputNumber size="small" slot="extra" :step="0.001"
                             style="width: 60px;margin-right: 10px;height: 25px;"
                             v-model="logoCtrl.pressHigh"></InputNumber>
                <Button slot="extra" :loading="logoCtrl.sendLoaading3" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo(logoCtrl.pressHigh, 'setPressUp', 3)">发送
                </Button>
              </Cell>
              <Cell title="压力超低报警">
                <InputNumber size="small" slot="extra" :step="0.001"
                             style="width: 60px;margin-right: 10px;height: 25px;"
                             v-model="logoCtrl.pressDown"></InputNumber>
                <Button slot="extra" :loading="logoCtrl.sendLoaading4" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo(logoCtrl.pressDown, 'setPressDown', 4)">发送
                </Button>
              </Cell>
              <Cell title="压力特低报警">
                <InputNumber size="small" slot="extra" :step="0.001"
                             style="width: 60px;margin-right: 10px;height: 25px;"
                             v-model="logoCtrl.pressTopDown"></InputNumber>
                <Button slot="extra" :loading="logoCtrl.sendLoaading5" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo(logoCtrl.pressTopDown, 'setPressDownDown', 5)">发送
                </Button>
              </Cell>
              <Cell title="流量超高报警">
                <InputNumber size="small" slot="extra" :step="0.001"
                             style="width: 60px;margin-right: 10px;height: 25px;"
                             v-model="logoCtrl.flowHigh"></InputNumber>
                <Button slot="extra" :loading="logoCtrl.sendLoaading6" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogo(logoCtrl.flowHigh, 'setFlow', 6)">发送
                </Button>
              </Cell>
              <Cell title="批量写入">
              <!--  <InputNumber size="small" slot="extra" :step="0.001"
                             style="width: 60px;margin-right: 10px;height: 25px;"
                             v-model="logoCtrl.flowHigh"></InputNumber>-->
                <Button slot="extra" :loading="logoCtrl.sendLoaading10" type="primary" size="small" style="width: 60px;"
                        @click="sendOrderWithParamLogoSendAll(logoCtrl.flowHigh, 'setAll', 8)">发送
                </Button>
              </Cell>
              </CellGroup>
           </div>
        </div>
        <!--其他模式模块界面-->
        <Spin size="small" fix v-if="loadPanelStatus"></Spin>
      </Card>
      <Card dis-hover :bordered="false" :padding="0">
        <Row style="text-align: center" class="towTail">
          <p>属性数据</p>
        </Row>
        <table class="tablll">
          <tr v-for="(item,index) in drawerData" :key="index" style="font-size: 14px;">
            <td class="titleStyle">{{item.keyName}}</td>
            <td style="width: 50%;text-align: center">
              <span v-if="item.type == 103 && item.value !== 'N/A'">
                <p :class="item.value === 1 ? 'dotGreen': 'dotDefault'" v-if="item.value === 1 || item.value === 0"></p>
                <p v-if="item.value !==0 && item.value !== 1">illogical</p>
              </span>
              <span v-if="item.type == 104 && item.value !== 'N/A'">
                <p :class="item.value === 1? 'dotRed': 'dotDefault'" v-if="item.value === 1 || item.value === 0"></p>
                <p v-if="item.value !==0 && item.value !== 1">illogical</p>
              </span>
              <span v-if="item.type == 105 && item.value !== 'N/A'">
                <p :class="item.value === 1? 'dotYellow': 'dotDefault'" v-if="item.value === 1 || item.value === 0"></p>
                <p v-if="item.value !==0 && item.value !== 1">illogical</p>
              </span>
              <span v-if="item.type == 100 && item.value !== 'N/A'">
                <p>{{item.value}}</p>
              </span>
              <span v-if="item.value === 'N/A'">
                <p>N/A</p>
              </span>
            </td>
            <td style="width: 15%;text-align: right;padding-right: 5px;">{{item.unit !== 'null'? item.unit: ''}}</td>
          </tr>
        </table>
      </Card>
    </Drawer>
    <Drawer :title="chartTargetName" placement="left" :closable="false" v-model="chartsDrawer" width="800" @on-visible-change="drawerStatusChange">
      <div id="chartA" class="oneContain"></div>
    </Drawer>
    <Drawer title="报警信息" :closable="false" v-model="warningModal" placement="left" width="800">
      <!--<Row style="margin-bottom: 15px;">
        <Col span = "24" style="text-align: right;">
          <Button type="primary" @click="refreshWarnDatas" size="small">刷新数据</Button>
          <Button type="primary" @click="showWarnValueModal" size="small">报警阀值</Button>
          <RadioGroup v-model="warnVoice" type="button" size="small" @on-change="makeWarnVoice">
            <Radio label="允许警报"></Radio>
            <Radio label="屏蔽警报"></Radio>
          </RadioGroup>
        </Col>
      </Row>-->
      <Table :columns="warnColumns" :data="warnTable" :loading="warnTableLoading" size="small"></Table>
      <Page :total="warnTableTotal" show-total :page-size="warnPageable.size" @on-change="warnPageChange"
            class="pagee" size="small"/>
    </Drawer>
    <Drawer title="报警阀值" :closable="false" v-model="warningValueModal" placement="left" width="300"
            @on-visible-change="propModalChange">
      <div>
        <Form :model="warnData" label-position="right" :label-width="100">
          <FormItem label="总管实时压力">
            <InputNumber v-model="warnData.setLimitDown3" class="jjk" placeholder="下限值"></InputNumber>
            <InputNumber v-model="warnData.setLimitUp3" class="jjk" placeholder="上限值"></InputNumber>
          </FormItem>
          <FormItem label="出水压力">
            <InputNumber v-model="warnData.setLimitDown1" class="jjk" placeholder="下限值"></InputNumber>
            <InputNumber v-model="warnData.setLimitUp1" class="jjk" placeholder="上限值"></InputNumber>
          </FormItem>
          <FormItem label="进水温度">
            <InputNumber v-model="warnData.setLimitDown2" class="jjk" placeholder="下限值"></InputNumber>
            <InputNumber v-model="warnData.setLimitUp2" class="jjk" placeholder="上限值"></InputNumber>
          </FormItem>
          <FormItem label="实时露点">
            <InputNumber v-model="warnData.setLimitDown0" class="jjk" placeholder="下限值"></InputNumber>
            <InputNumber v-model="warnData.setLimitUp0" class="jjk" placeholder="上限值"></InputNumber>
          </FormItem>
        </Form>
        <Row>
          <Col span="24" style="text-align: right;">
            <Button type="primary" @click="saveProps" size="small" :loading="savePropsLoading">保存修改</Button>
          </Col>
        </Row>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { FlowingSupport } from '../../../static/qunee/flowPrototype'
export default {
  name: 'Testt',
  components: {},
  mounted: function () {
    this.initGraph()
    this.loadSettingWarnDataRequest()
    setTimeout(() => { this.loadImgData() }, 100)
  },
  data: function () {
    return {
      warnData: {},
      warnColumns: [
        {
          title: 'ID',
          width: 50,
          align: 'center',
          key: 'id'
        },
        {
          title: '名称',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          key: 'devName'
        },
        {
          title: '内容',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          key: 'warnType'
        },
        {
          title: '数据',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          key: 'value'
        },
        {
          title: '时间',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          key: 'time'
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                  disabled: params.row.handle !== 0
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  'click': () => {
                    // 把 hanlde 字段设置为 1 ，用更新对象方法
                    this.makeWarnInfoHandled(params.row)
                  }
                }
              }, params.row.handle === 0 ? '处理' : '已处理')
            ])
          }
        }
      ],
      warnTable: [],
      warnTableTotal: 0,
      warnPageable: {
        page: 0,
        size: 20
      },
      warnTableLoading: false,
      voiceUrl: require('../../assets/voice/warn.mp3'),
      voiceObj: null,
      voiceShouldStatus: false,
      contollType: '',
      controllModel: {
        param: 49,
        sendStopOrderLoading: false
      },
      logoCtrl: {
        press: 0.68,
        pressHigh: 0.75,
        pressTopHigh: 0.8,
        pressTopDown: 0.66,
        pressDown: 0.67,
        flowHigh: 140,
        sendLoaading1: false,
        sendLoaading2: false,
        sendLoaading3: false,
        sendLoaading4: false,
        sendLoaading5: false,
        sendLoaading6: false,
        sendLoaading7: false,
        sendLoaading8: false,
        sendLoaading9: false,
        sendLoaading10: false,
        sendLoaading11: false
      },
      TowerCtrl: {
        // 冷却塔 控制
        sendOpenStatus: false,
        sendStopStatus: false
      },
      FaMenCtrl: {
        // 阀门 控制
        sendOpenStatus: false, // 开输出
        sendStopStatus: false, // 关输出
        sendStopOpenStatus: false, // 开停
        sendStopCloseStatus: false // 关停
      },
      LengGanJiCtrl: {
        // 冷干机 控制
        sendOpenStatus: false,
        sendStopStatus: false
      },
      propertiesDrawer: false,
      warningModal: false,
      warningValueModal: false,
      warnVoice: '允许警报',
      savePropsLoading: false,
      chartsDrawer: false,
      sendLoaading: false, // 设定频率，button loading标志
      askStatus: false, // 单通道 起停状态   双通道 启动状态  共用
      askStatus3: false, // 远程停止 询问状态
      controllStatus: false, //  单通道 起停状态   双通道 启动状态  请求loading状态记录
      controllStatus3: false, //  双通道 远程停止 询问状态
      loadPanelStatus: false,
      drawerObj: {},
      drawerData: {},
      drawerDataChange: {
        model: null,
        run: null,
        error: null,
        order: null
      },
      chartObj: {},
      chartTargetName: '',
      graph: null,
      flowObj: null,
      chartAObj: null,
      StatusColors: {
        STOP: '#d6d6d6',
        ERROR: '#ee0853',
        RUNNING: '#00FFFFFF',
        OFFLINE: '#ee0853' // 取消通讯异常，跟error一个颜色处理
      },
      imgSystem: {},
      clickOne: null,
      ifResize: false,
      proDrawer: {
        padding: '0px'
      },
      chartOptions: {
        optionA: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }]
        }
      },
      timers: [],
      warnTimer: null,
      drawerTimer: null,
      position: {
        left: 0,
        top: 0
      },
      switches: {
        loadImgStatus: false // 加载状态
      },
      events: {
        onmousewheel: (evt, graph) => {
          console.log('onmousewheel')
        },
        ondrag: (evt, graph) => {
          console.log('ondrag')
        },
        onclick: (evt) => {
          if (evt.getData() instanceof Q.Node && !(evt.getData() instanceof Q.ShapeNode) &&
            !(evt.getData() instanceof Q.Text)) {
            console.log('onclick obj', evt.getData())
            let clickNode = evt.getData()
            if (clickNode.name === '阀值报警指示灯') {
              return
            }
            if (clickNode.id !== this.drawerObj.id) {
              this.loadPanelStatus = true
              this.drawerObj = evt.getData()
              this.propertiesDrawer = true
              this.closeDrawerTimer()
              this.startDrawerTimer(clickNode.get('did'), clickNode.id)
              if (clickNode.name && clickNode.name.indexOf('车间末端减压控制模块') > -1) {
                this.makeOneForLogo(clickNode.get('did'))
              }
              this.checkDrawerToggler()
            }
          }
        },
        ondblclick: (evt, graph) => {
          // 双击
          if (!evt.getData()) {
            return
          }
          let dd = evt.getData()
          if (dd instanceof Q.Text && dd.get('ifValue')) {
            // 弹出报表窗口
            this.chartObj = dd
            this.chartTargetName = dd.get('name')
            this.chartsDrawer = true
            this.propertiesDrawer = false
          }
          if (dd.name === '阀值报警指示灯') {
            this.warningModal = true
            this.warnTableLoading = true
            this.warnPageable.page = 0
            this.loadWarnInfoDatas()
          }
        },
        onmousemove: (evt, graph) => {
          let ui = graph.getUIByMouseEvent(evt)
          if (ui && ui.data instanceof Q.Node) {
            graph.cursor = 'pointer'
            return
          }
          graph.cursor = null
        }
      }
    }
  },
  beforeDestroy: function () {
    this.allClearInterval()
    // this.voiceObj.pause()
    this.voiceObj = null
  },
  methods: {
    showAlarmPanel () {
      this.warningModal = true
      this.warnTableLoading = true
      this.warnPageable.page = 0
      this.loadWarnInfoDatas()
    },
    warnPageChange (index) {
      this.warnPageable.page = index - 1
      this.loadWarnInfoDatas()
    },
    refreshWarnDatas () {
      this.loadWarnInfoDatas()
    },
    loadWarnInfoDatas () {
      // 请求table数据
      this.warnTableLoading = true
      window.myapi.do_gett('warns/list', this.warnPageable).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.warnTable = resp.data.data.content
          this.warnTableTotal = resp.data.data.totalElements
        } else {
          this.$Notice.warning({
            title: '提示',
            desc: resp.data.msg
          })
        }
      }).finally(() => {
        this.warnTableLoading = false
      })
    },
    makeWarnInfoHandled (item) {
      item.handle = 1
      window.myapi.do_put('warns/upd', item).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
        } else {
          this.$Notice.error({
            title: '提示',
            desc: resp.data.msg
          })
        }
      }).finally(() => {
      })
    },
    showWarnValueModal () {
      this.warningValueModal = true
    },
    makeWarnVoice (text) {
      if (text === '允许警报' && this.voiceShouldStatus) {
        this.playWarnVoice()
      }
      if (text === '屏蔽警报' && this.voiceShouldStatus) {
        this.stopPlayVoice()
      }
    },
    saveProps () {
      let params = []
      for (let i = 1; i < 4; i++) {
        let objUp = {
          name: 'setLimitUp',
          devId: i === 1 ? 160 : (i === 2 ? 161 : 162),
          value: this.warnData['setLimitUp' + i]
        }
        params.push(objUp)
        let objUpDown = {
          name: 'setLimitDown',
          devId: i === 1 ? 160 : (i === 2 ? 161 : 162),
          value: this.warnData['setLimitDown' + i]
        }
        params.push(objUpDown)
      }
      //  处理液位计 start
      let objUp1 = {
        name: 'setLimitUp',
        devId: 106,
        value: this.warnData['setLimitUp0']
      }
      params.push(objUp1)
      let objUpDown1 = {
        name: 'setLimitDown',
        devId: 106,
        value: this.warnData['setLimitDown0']
      }
      params.push(objUpDown1)
      // 处理露点的 end
      this.savePropsLoading = true
      window.myapi.post_json('process/saveWarns', params).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.$Notice.success({
            title: '操作提示',
            desc: '保存成功'
          })
          // this.warningValueModal = false
        } else {
          this.$Notice.error({
            title: '操作提示',
            desc: resp.data.msg
          })
        }
      }).catch(error => {
      }).finally(() => {
        this.savePropsLoading = false
      })
    },
    propModalChange (status) {
      if (!status) {
        this.loadSettingWarnDataRequest()
      }
    },
    loadSettingWarnDataRequest () {
      this.requestForPropsValues(160, 1)
      this.requestForPropsValues(161, 2)
      this.requestForPropsValues(162, 3)
      this.requestForPropsValues(106, 0)
    },
    requestForPropsValues (id, index) {
      let params = {devId: id}
      window.myapi.do_post('iot/dev/def', params).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
           let result = resp.data.data
          if (id === 106) {
            let upOne = result.find(item => item.name === 'setLimitUp')
            if (upOne) {
              this.warnData['setLimitUp0'] = parseFloat(upOne.value)
            }
            let downOne = result.find(item => item.name === 'setLimitDown')
            if (downOne) {
              this.warnData['setLimitDown0'] = parseFloat(downOne.value)
            }
          } else {
            let upOne = result.find(item => item.name === 'setLimitUp')
            if (upOne) {
              this.warnData['setLimitUp' + index] = parseFloat(upOne.value)
            }
            let downOne = result.find(item => item.name === 'setLimitDown')
            if (downOne) {
              this.warnData['setLimitDown' + index] = parseFloat(downOne.value)
            }
          }
        }
      }).catch(error => {
      }).finally(() => {
      })
    },
    sendOrderWithParam () {
      if (!this.controllModel.param) {
        this.$Message.info('给定频率不能为空，请填写数字！')
        return
      }
      // 发送写指令设备1
      let qq = { devId: this.drawerObj.get('devId'), cmd: 'setFrep', param: this.controllModel.param }
      this.sendLoaading = true
      window.myapi.do_post('iot/dev/cmdById', qq).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          if (resp.data.data === 1) {
            this.$Notice.success({
              title: '操作反馈',
              desc: '发送指令成功'
            })
            // this.controllModel.param = 1
          }
          if (resp.data.data === 2) {
            this.$Notice.success({
              title: '操作反馈',
              desc: '非远程状态无法控制'
            })
          }
        }
      }).catch(error => {}).finally(() => {
        this.controllStatus = false
        this.loadPanelStatus = true
        this.closeDrawerTimer()
        this.startDrawerTimer(this.drawerObj.get('did'), this.drawerObj.id)
        this.sendLoaading = false
      })
    },
    sendOrderToStopForFreq () {
      // 发送变频器 停止 命令
      let qq = { devId: this.drawerObj.get('devId'), cmd: 'stop', param: '' }
      this.controllModel.sendStopOrderLoading = true
      window.myapi.do_post('iot/dev/cmdById', qq).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          if (resp.data.data === 1) {
            this.$Notice.success({
              title: '操作反馈',
              desc: '发送指令成功'
            })
          }
          if (resp.data.data === 2) {
            this.$Notice.success({
              title: '操作反馈',
              desc: '非远程状态无法控制'
            })
          }
        }
      }).catch(error => {}).finally(() => {
        this.controllStatus = false
        this.loadPanelStatus = true
        this.closeDrawerTimer()
        this.startDrawerTimer(this.drawerObj.get('did'), this.drawerObj.id)
        this.controllModel.sendStopOrderLoading = false
      })
    },
    sendOrderWithParamLogo (data, order, index) {
      if (data === '' && index < 7) {
        this.$Message.info('发送内容不能为空')
        return
      }
      this.$Modal.confirm({
        title: '确认操作',
        content: '您确定确认远程操作设备吗?',
        onOk: () => {
          // 发送写指令设备1
          let qq = {devId: this.drawerObj.get('devId'), cmd: order, param: data}
          // this.sendLoaading = true
          // eval(`this.logoCtrl.sendLoaading${index} = true`)
          switch (index) {
            case 1:
               this.logoCtrl.sendLoaading1 = true
              break
            case 2:
               this.logoCtrl.sendLoaading2 = true
              break
            case 3:
               this.logoCtrl.sendLoaading3 = true
              break
            case 4:
               this.logoCtrl.sendLoaading4 = true
              break
            case 5:
               this.logoCtrl.sendLoaading5 = true
              break
            case 6:
               this.logoCtrl.sendLoaading6 = true
              break
            case 7:
               this.logoCtrl.sendLoaading7 = true
              break
            case 8:
               this.logoCtrl.sendLoaading8 = true
              break
            case 9:
               this.logoCtrl.sendLoaading9 = true
              break
            case 11:
               this.logoCtrl.sendLoaading11 = true
              break
          }
          window.myapi.do_post('iot/dev/cmdById', qq).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              if (resp.data.data === 1) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '操作成功'
                })
              }
              if (resp.data.data === 2) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '非远程状态无法控制'
                })
              }
            }
          }).catch(error => {
          }).finally(() => {
            this.controllStatus = false
            this.loadPanelStatus = true
            this.makeOneForLogo(this.drawerObj.get('did'))
            // this.closeDrawerTimer()
            // this.startDrawerTimer(this.drawerObj.get('did'), this.drawerObj.id)
            this.stopLogoLoadings()
          })
        },
        okText: '确定',
        cancelText: '取消',
        onCancel: () => {
        }
      })
    },
    sendOrderWithParamLogoSendAll (data, order, index) {
      this.$Modal.confirm({
        title: '确认操作',
        content: '您确定确认远程操作设备吗?',
        onOk: () => {
          // 发送写指令设备1
          let qq = {devId: this.drawerObj.get('devId'), cmd: order, param: JSON.stringify(this.logoCtrl)}
          this.logoCtrl.sendLoaading10 = true
          window.myapi.do_post('iot/dev/cmdById', qq).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              if (resp.data.data === 1) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '操作成功'
                })
              }
              if (resp.data.data === 2) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '非远程状态无法控制'
                })
              }
            }
          }).catch(error => {
          }).finally(() => {
            this.controllStatus = false
            this.loadPanelStatus = true
            this.makeOneForLogo(this.drawerObj.get('did'))
            // this.closeDrawerTimer()
            // this.startDrawerTimer(this.drawerObj.get('did'), this.drawerObj.id)
            this.stopLogoLoadings()
          })
        },
        okText: '确定',
        cancelText: '取消',
        onCancel: () => {
        }
      })
    },
    stopLogoLoadings () {
        this.logoCtrl.sendLoaading1 = false
        this.logoCtrl.sendLoaading2 = false
        this.logoCtrl.sendLoaading3 = false
        this.logoCtrl.sendLoaading4 = false
        this.logoCtrl.sendLoaading5 = false
        this.logoCtrl.sendLoaading6 = false
        this.logoCtrl.sendLoaading7 = false
        this.logoCtrl.sendLoaading8 = false
        this.logoCtrl.sendLoaading9 = false
        this.logoCtrl.sendLoaading11 = false
    },
    lengQueBengOpe (cmd) {
      // 冷却塔发送控制指令
      this.$Modal.confirm({
        title: '确认远程操作',
        content: '您确定确认远程操作设备吗?',
        onOk: () => {
          if (cmd === 'close') {
            this.TowerCtrl.sendStopStatus = true
          } else {
            this.TowerCtrl.sendOpenStatus = true
          }
          let qq = {devId: this.drawerObj.get('devId'), cmd: cmd, param: ''}
          window.myapi.do_post('iot/dev/cmdById', qq).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              if (resp.data.data === 1) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '发送指令成功'
                })
              }
              if (resp.data.data === 2) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '非远程状态无法控制'
                })
              }
            }
          }).catch(error => {
          }).finally(() => {
            this.TowerCtrl.sendOpenStatus = false
            this.TowerCtrl.sendStopStatus = false
          })
        },
        okText: '确定',
        cancelText: '取消',
        onCancel: () => {
        }
      })
    },
    DianDongFaOpe (cmd) {
      // 电动阀 发送控制指令
      this.$Modal.confirm({
        title: '确认远程操作',
        content: '您确定确认远程操作设备吗?',
        onOk: () => {
          if (cmd === 'startOpen') {
            this.FaMenCtrl.sendOpenStatus = true
          } else if (cmd === 'stopOpen') {
            this.FaMenCtrl.sendStopOpenStatus = true
          } else if (cmd === 'startClose') {
            this.FaMenCtrl.sendStopStatus = true
          } else if (cmd === 'stopClose') {
            this.FaMenCtrl.sendStopCloseStatus = true
          }
          let qq = {devId: this.drawerObj.get('devId'), cmd: cmd, param: ''}
          window.myapi.do_post('iot/dev/cmdById', qq).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              if (resp.data.data === 1) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '发送指令成功'
                })
              }
              if (resp.data.data === 2) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '非远程状态无法控制'
                })
              }
            }
          }).catch(error => {
          }).finally(() => {
            this.FaMenCtrl.sendOpenStatus = false
            this.FaMenCtrl.sendStopStatus = false
            this.FaMenCtrl.sendStopOpenStatus = false
            this.FaMenCtrl.sendStopCloseStatus = false
          })
        },
        okText: '确定',
        cancelText: '取消',
        onCancel: () => {
        }
      })
    },
    lengGanJiOpe (cmd) {
      // 冷干机 发送控制指令
      this.$Modal.confirm({
        title: '确认远程操作',
        content: '您确定确认远程操作设备吗?',
        onOk: () => {
          if (cmd === 'closeByRemote') {
            this.LengGanJiCtrl.sendStopStatus = true
          } else {
            this.LengGanJiCtrl.sendOpenStatus = true
          }
          let qq = {devId: this.drawerObj.get('devId'), cmd: cmd, param: ''}
          window.myapi.do_post('iot/dev/cmdById', qq).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              if (resp.data.data === 1) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '发送指令成功'
                })
              }
              if (resp.data.data === 2) {
                this.$Notice.success({
                  title: '操作反馈',
                  desc: '非远程状态无法控制'
                })
              }
            }
          }).catch(error => {
          }).finally(() => {
            this.LengGanJiCtrl.sendOpenStatus = false
            this.LengGanJiCtrl.sendStopStatus = false
          })
        },
        okText: '确定',
        cancelText: '取消',
        onCancel: () => {
        }
      })
    },
    backInData (target) {
      console.log('status', target)
      if (target === 1) {
        return 0
      }
      if (target === 0) {
        return 1
      }
    },
    sendControllerCmd (status) {
      // 单通道 启停请求
      let qq = { devId: this.drawerObj.get('devId'), cmd: status === 1 ? 'close' : 'open', param: '' }
      window.myapi.do_post('iot/dev/cmdById', qq).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          if (resp.data.data === 1) {
            this.$Notice.success({
              title: '操作反馈',
              desc: '操作成功'
            })
          }
          if (resp.data.data === 2) {
            this.$Notice.success({
              title: '操作反馈',
              desc: '非远程状态无法控制'
            })
          }
        }
      }).catch(error => {}).finally(() => {
        this.controllStatus = false
        this.loadPanelStatus = true
        this.closeDrawerTimer()
        this.startDrawerTimer(this.drawerObj.get('did'), this.drawerObj.id)
      })
    },
    initGraph: function () {
      // 初始化 拓扑图2
      if (this.graph === null) {
        this.graph = new Q.Graph('qtcanvas')
        // 禁止双击 放大
        this.graph.enableDoubleClickToOverview = false
        // 设置提示贴
        this.graph.enableTooltip = false
        this.graph.tooltipDelay = 0
        this.graph.tooltipDuration = 100000
        // 只读
        this.graph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
        // 添加 一些事件
        this.graph.addCustomInteraction(this.events)
        // 添加一些样式
        this.graph.styles = {}
        this.graph.styles[Q.Styles.SELECTION_COLOR] = '#05ff63'
        // this.graph.styles[Q.Styles.SELECTION_SHADOW_BLUR] = Q.Consts.SELECTION_TYPE_SHADOW
        // 添加动画
        this.flowObj = new FlowingSupport(this.graph)
      }
    },
    loadImgData: function () {
      this.switches.loadImgStatus = true
      // 加载 系统图的 数据
      window.myapi.do_get('/sysimg/info/11').then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.imgSystem = resp.data.data
          // 把json 数据转为 视图的方法
          this.graph.parseJSON(this.imgSystem.layoutData)
          // 自适应 范围
          this.graph.zoomToOverview()
          // 添加状态小点
          // 添加流动线
          this.graph.forEach(item => {
            if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
              // console.log('item.get', item.get('color'))
              // 添加流动的效果
              this.flowObj.addFlowing(item, 3, true, item.get('color'))
            }
          })
          // 执行动态
          this.flowObj.start()

          // 添加实时数据显示
          this.executeTimerLoadRealData()

          // todo 模拟每隔一段时间，关闭机器
          // this.timers.push(setInterval(() => { this.randomShutDownDevice() }, 1000))
        } else {
          this.$Notice.error({
            title: '提示',
            desc: resp.data.msg
          })
        }
      }).catch(reason => {
        this.$Notice.warning({
          title: '提示',
          desc: '加载数据有误，请检查.......'
        })
      }).finally(() => {
        this.switches.loadImgStatus = false
        this.flowObj.start()
      })
    },
    checkDrawerToggler () {
      // 检测开关的数据提示
      if (this.drawerObj.get('prol') && !this.drawerObj.get('devId')) {
        this.$Notice.info({
          title: '提示',
          desc: '节点含有协议却没配置设备id，请检查：' + this.drawerObj.name
        })
        return
      }
      this.contollType = this.drawerObj.get('prol')
    },
    drawerStatusChange (status) {
      if (!status) {
        this.closeDrawerTimer()
        this.drawerObj = {}
        this.chartObj = {}
        this.chartTargetName = ''
      } else {
        // 加载图标
        this.chartsInDatas()
      }
    },
    initCharts: function () {
      if (this.chartAObj == null) {
        // 在 显示/隐藏的组件内，必须初始化时候，设定长宽，才能渲染图标
        document.getElementById('chartA').style.height = '300px'
        document.getElementById('chartA').style.width = '750px'
        this.chartAObj = this.$echarts.init(document.getElementById('chartA'))
        window.onresize = () => {
          this.chartAObj.resize()
        }
      }
    },
    chartsInDatas: function () {
      this.initCharts()
      if (this.chartAObj !== null) {
        console.log('this.chartAObj', this.chartAObj)
        this.chartAObj.showLoading({ text: '请求数据.....' })
        this.chartAObj.setOption(this.chartOptions.optionA, true)
        this.chartAObj.hideLoading()
        this.chartAObj.resize()
      }
    },
    closeDrawerTimer () {
      if (this.drawerTimer) {
        window.clearInterval(this.drawerTimer)
      }
    },
    startDrawerTimer (nodeId, id) {
      this.loadDrawerDataBody(nodeId, id)
      this.drawerTimer = setInterval(() => {
        this.loadDrawerDataBody(nodeId, id)
      }, 2000 + Math.floor(Math.random() * 500))
    },
    loadDrawerDataBody: function (uuid, id) {
      window.myapi.do_post('iot/dev/sysReal', { uuid: uuid }).then(resp => {
        if (resp.status === 200 && resp.data.status === 200 && this.drawerObj.id === id) {
          this.drawerData = resp.data.data
          this.changeDrawerForControllers()
        }
      }).finally(() => {})
    },
    makeOneForLogo (uuid) {
      window.myapi.do_post('iot/dev/sysReal', {uuid: uuid}).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          let somee = resp.data.data
          // logo 末端输出 的一些参数
          let logoPress = somee.find(item => item.keyName === '压力设定')
          if (logoPress) {
            this.logoCtrl.press = logoPress.value
          }
          let logoPress2 = somee.find(item => item.keyName === '压力上限设定')
          if (logoPress2) {
            this.logoCtrl.pressHigh = logoPress2.value
          }
          let logoPress3 = somee.find(item => item.keyName === '压力上上限设定')
          if (logoPress3) {
            this.logoCtrl.pressTopHigh = logoPress3.value
          }
          let logoPress4 = somee.find(item => item.keyName === '压力下下限设定')
          if (logoPress4) {
            this.logoCtrl.pressTopDown = logoPress4.value
          }
          let logoPress5 = somee.find(item => item.keyName === '压力下限设定')
          if (logoPress5) {
            this.logoCtrl.pressDown = logoPress5.value
          }
          let logoPress6 = somee.find(item => item.keyName === '流量阀值设定')
          if (logoPress6) {
            this.logoCtrl.flowHigh = logoPress6.value
          }
        }
      }).finally(() => {
      })
    },
    changeDrawerForControllers () {
      let statusItem = this.drawerData.find(item => item.keyName === '控制模式')
      if (statusItem) {
        this.drawerDataChange.model = statusItem.value
      } else {
        this.drawerDataChange.model = 'N/A'
      }
      let runStatusItem = this.drawerData.find(item => item.keyName === '运行状态')
      if (runStatusItem) {
        this.drawerDataChange.run = runStatusItem.value
        if (runStatusItem.value === 0 && this.loadPanelStatus) {
          this.drawerDataChange.order = 1
        }
        if (runStatusItem.value === 1 && this.loadPanelStatus) {
          this.drawerDataChange.order = 0
        }
      }
      // 冷却泵变频器 start 临时
      let freqStatusItem = this.drawerData.find(item => item.keyName === '变频运行')
  /*    if (freqStatusItem) {
        this.drawerDataChange.run = freqStatusItem.value
        if (freqStatusItem.value === 0 && this.loadPanelStatus) {
          this.drawerDataChange.order = 1
        }
        if (freqStatusItem.value === 1 && this.loadPanelStatus) {
          this.drawerDataChange.order = 0
        }
      } */
      let freqNum = this.drawerData.find(item => item.keyName === '输出频率')
      if (freqNum && freqNum !== 'null') {
        this.drawerDataChange.freq = freqNum.value
      } else {
        this.drawerDataChange.freq = 'N/A'
      }
      if (freqStatusItem && freqNum) {
        // 工频运行并且 输出频率是大于0 为运行中状态，，输出频率为0 则是备妥状态
        if (this.drawerDataChange.freq !== 'N/A') {
          if (freqStatusItem.value === 1 && this.drawerDataChange.freq > 0) {
            this.drawerDataChange.run = 1
          }
          if (freqStatusItem.value === 1 && this.drawerDataChange.freq === 0) {
            this.drawerDataChange.run = 0
          }
        }
        if (this.drawerDataChange.freq === 'N/A') {
          this.drawerDataChange.run = 'N/A'
        }
      }
      // 冷却泵变频器 end 临时
      let errorStatusItem = this.drawerData.find(item => item.keyName === '故障状态')
      if (errorStatusItem) {
        this.drawerDataChange.error = errorStatusItem.value
      }
      // 双通道 属性 启动
      let launchStatus = this.drawerData.find(item => item.keyName === '远程启动')
      if (launchStatus) {
        if (launchStatus.value === 0 && this.loadPanelStatus) {
          this.drawerDataChange.launch = 1
        }
        if (launchStatus.value === 1 && this.loadPanelStatus) {
          this.drawerDataChange.launch = 0
        }
      } else {
        if (this.loadPanelStatus) {
          this.drawerDataChange.launch = 0
        }
      }
      // 双通道 属性 停止
      let stopStatus = this.drawerData.find(item => item.keyName === '远程停止')
      if (stopStatus) {
        if (stopStatus.value === 0 && this.loadPanelStatus) {
          this.drawerDataChange.stop = 1
        }
        if (stopStatus.value === 1 && this.loadPanelStatus) {
          this.drawerDataChange.stop = 0
        }
      } else {
        if (this.loadPanelStatus) {
          this.drawerDataChange.stop = 0
        }
      }

      // 电动阀 进气 进水 ---开状态
      let openingStatus = this.drawerData.find(item => item.keyName === '开状态')
      if (openingStatus) {
        this.drawerDataChange.opening = openingStatus.value
      } else {
        this.drawerDataChange.opening = 'N/A'
      }

      // 电动阀 进气 进水 ---开到位
      let openStatus2 = this.drawerData.find(item => item.keyName === '开到位')
      if (openStatus2) {
          this.drawerDataChange.open = openStatus2.value
      } else {
        this.drawerDataChange.open = 'N/A'
      }

      // 电动阀 进气 进水 ---关状态
      let closing = this.drawerData.find(item => item.keyName === '关状态')
      if (closing) {
        this.drawerDataChange.closing = closing.value
      } else {
        this.drawerDataChange.closing = 'N/A'
      }

      // 电动阀 进气 进水 ---关到位
      let close = this.drawerData.find(item => item.keyName === '关到位')
      if (close) {
        this.drawerDataChange.close = close.value
      } else {
        this.drawerDataChange.close = 'N/A'
      }
      this.loadPanelStatus = false
    },
    randomShutDownDevice: function () {
      // 根据状态控制设备图标的亮色 以及 线条流动情况
      let randomObj = this.graph.graphModel.random
      // console.log('randomObj:', randomObj)
      if (randomObj instanceof Q.LinkableNode) {
        randomObj.setStyle(Q.Styles.RENDER_COLOR, this.StatusColors.STOP)
        randomObj.setStyle(Q.Styles.RENDER_COLOR_BLEND_MODE, Q.Consts.BLEND_MODE_GRAY)

        let lines = randomObj.get('lines')
        // console.log('your lines is:', lines)
        if (lines) {
          for (let i = 0; i < lines.length; i++) {
            this.graph.forEach(item => {
              if (item instanceof Q.ShapeNode && item.get('did') === lines[i]) {
                // console.log('findOne',item)
                // 把层级降低
                item.zIndex = item.zIndex - 7
                this.flowObj.removeFlowing(item.id)
                // item.setStyle(Q.Styles.SHAPE_STROKE_STYLE, StatusColors.STOP); // 线条颜色
              }
            })
          }
        }
      }
    },
    executeTimerLoadRealData: function () {
      // 实时数据添加 label UI
      this.graph.forEach(item => {
        // 规定必须 为  LinkableNode 类型才处理数据模板，Node的需要直接修改Json数据库数据为该名字
        if (item instanceof Q.LinkableNode && item.name) {
          if (item.name.indexOf('#冷干机') > -1 || item.name.indexOf('#离心机') > -1 || item.name.indexOf('#螺杆机') >
            -1 || item.name.indexOf('#吸干机') >
            -1 || item.name.indexOf('车间末端减压控制模块') > -1 || item.name.indexOf('冷却水') > -1 ||
            item.name.indexOf('#冷却_供水压力') > -1 || item.name.indexOf('#冷却_回水温度') > -1) {
            let label2 = new Q.LabelUI()
            label2.position = Q.Position.CENTER_TOP
            label2.alignPosition = Q.Position.LEFT_TOP // 文字对齐
            label2.anchorPosition = Q.Position.CENTER_BOTTOM
            label2.border = 0
            label2.padding = new Q.Insets(2, 5)
            label2.showPointer = false // 是否显示箭头
            label2.offsetY = -5
            label2.offsetX = 0
            label2.backgroundColor = 'rgba(0,0,0,0)'
            label2.fontSize = 27
            label2.size = 220
            // label2.fontStyle = 'italic 100'
            // 末端数据显示位置特殊处理1122
            if (item.name.indexOf('车间末端减压控制模块') > -1) {
              label2.offsetY = -80
              label2.offsetX = 20
              label2.fontSize = 20
              label2.anchorPosition = Q.Position.RIGHT
            }

            // #冷却_回水温度 显示位置特殊处理1122
            if (item.name.indexOf('#冷却_回水温度') > -1) {
              label2.offsetY = -15
              label2.offsetX = -145
              label2.anchorPosition = Q.Position.LEFT
            }
            // #冷却_回水温度 显示位置特殊处理1122
            if (item.name.indexOf('#冷却_供水压力') > -1) {
              label2.offsetY = -15
              label2.offsetX = 35
              label2.anchorPosition = Q.Position.LEFT
            }

            item.addUI(label2, [{
              property: 'label2',
              propertyType: Q.Consts.PROPERTY_TYPE_CLIENT,
              bindingProperty: 'data'
            }, {
              property: 'label2.color',
              propertyType: Q.Consts.PROPERTY_TYPE_CLIENT,
              bindingProperty: 'color'
            }])
            // 绑定实时显示属性
            item.set('label2', '')
            // end 添加显示面板
          }

          // 全部数据都请求实时数据
          // 添加定时器标志 到对象中
          this.loadRealDatas(item)
          this.timers.push(setInterval(() => {
            this.loadRealDatas(item)
          }, 2000 + Math.floor(Math.random() * 500)))
        }
        // 文字面板的
        if (item instanceof Q.Text && item.get('ifValue')) {
          this.loadTextDats(item)
          this.timers.push(setInterval(() => {
            this.loadTextDats(item)
          }, 2000 + Math.floor(Math.random() * 500)))
        }
        // 报警指示灯的
        if (item instanceof Q.Node && item.name === '阀值报警指示灯') {
          this.loadWarnPropsRealData(item)
          this.timers.push(setInterval(() => {
            this.loadWarnPropsRealData(item)
          }, 2000 + Math.floor(Math.random() * 500)))
        }
      })
    },
    loadRealDatas (node) {
      let data = { uuid: node.get('did') }
      window.myapi.do_post('iot/dev/sysReal', data).then(resp => {
        if (resp.status === 200) {
          if (node.name.indexOf('#冷干机') > -1 || node.name.indexOf('#离心机') > -1 || node.name.indexOf('#螺杆机') >
            -1 || node.name.indexOf('#吸干机') > -1 ||
            node.name.indexOf('车间末端减压控制模块') > -1 || node.name.indexOf('冷却水') > -1 || node.name.indexOf('冷却_供水压力') >
            -1 || node.name.indexOf('冷却_回水温度') > -1) {
            let content = ''
            let obj = resp.data.data
            if (obj.length > 0) {
              let maxShow = node.name.indexOf('车间末端减压控制模块') > -1 ? 3 : 1
              for (let i = 0; i < obj.length; i++) {
                let sis = obj[i]
                // 双方的
                if (node.name.indexOf('冷却_供水压力') > -1 || node.name.indexOf('冷却_回水温度') > -1) {
                    content = content + sis.keyName + '：' + sis.value + '   '
                } else {
                    content = content + sis.keyName + '：' + sis.value + '\n'
                }
                if (i === maxShow) {
                  break
                }
              }
            }
            // 字符串赋值到上面
            node.set('label2', content)
          }
          // 冷却塔, 冷却泵, 冷干机状态   处理数据(无须面板数据)
          if (node.name.indexOf('#冷却塔') > -1 || node.name.indexOf('#冷干机') > -1 || node.name.indexOf('#冷却泵') > -1 ||
            node.name.indexOf('#离心机') > -1 || node.name.indexOf('#螺杆机') > -1) {
            this.handlerCoolTowerRespData(node, resp.data.data)
          }

          // 特例，处理 末端控制流动
          if (node.name.indexOf('车间末端减压控制模块') > -1) {
            this.endLineFlowController(node, resp.data.data)
          }
        }
      }).catch((error) => {
        // this.$Notice.warning({
        //   title: '提示',
        //   desc: 'loadRealDatas加载数据有误，请检查.......'
        // })
      }).finally(() => {})
    },
    endLineFlowController (node, list) {
      // 控制末端的线条流动问题： 流量 < 0.1 不流动
      let tar = list.find(item => item.keyName === '实时流量')
      let lines = node.get('lines')
      let status = node.get('status') !== undefined ? node.get('status') : true
      if (tar && tar.value !== 'N/A' && tar.value > 0.1) {
        if (lines.length > 0 && !status) {
          node.set('status', true)
          for (let i = 0; i < lines.length; i++) {
            this.graph.forEach(item => {
              if (item instanceof Q.ShapeNode && item.get('did') === lines[i]) {
                // 启动，线条流动
                this.flowObj.removeFlowing(item.id)
                this.flowObj.addFlowing(item, 3, true, item.get('color'))
              }
            })
          }
        }
      } else {
         if (lines.length > 0 && status) {
           node.set('status', false)
           for (let i = 0; i < lines.length; i++) {
             this.graph.forEach(item => {
               if (item instanceof Q.ShapeNode && item.get('did') === lines[i]) {
                 // 启动，线条流动
                 this.flowObj.removeFlowing(item.id)
               }
             })
           }
         }
      }
    },
    handlerCoolTowerRespData (node, list) {
      // console.log("ddddd", list);
      // 处理冷却塔 的状态实时逻辑
      let color = ''
      let oldColor = node.get('statusColor')
      let statusText = '运行状态'
      // 1. 优先处理 【离线状态】
      // 冷却泵 获取的名称不一样，特殊处理
      if (node.name.indexOf('#冷却泵') > -1) {
        statusText = '水泵运行'
      }
      let runStatusObj = list.find(item => item.keyName === statusText)
      // todo delete start
      runStatusObj.value = 1
      if (node.name === '1#冷却泵' || node.name === '4#离心机') {
      runStatusObj.value = 0
      }
     // todo delete end
      if ((runStatusObj && runStatusObj.value === 'N/A') ||
        (runStatusObj.value !== 1 && runStatusObj.value !== 0 && runStatusObj.value !== 'N/A')) {

        // 第二种情况是 数据异常，出现不合理的数据，也归为通讯异常
        color = this.StatusColors.OFFLINE
        if (color !== oldColor) {
          this.doChangeNodeLinesColor(node, color)
          node.set('statusColor', color)
        }
        return
      }
      // 2. 优先处理 【故障状态】
      let accidentStatusObj = list.find(item => item.keyName === '故障状态')
      if (node.name === '4#冷干机') {
        accidentStatusObj.value = 1
      }
      if (accidentStatusObj) {
        if (accidentStatusObj.value === 1) {
          color = this.StatusColors.ERROR
          if (color !== oldColor) {
            this.doChangeNodeLinesColor(node, color)
            node.set('statusColor', color)
          }
          return
        }
      }

      // 3. 优先处理 【运行状态】
      if (runStatusObj) {
        if (runStatusObj.value === 0) {
          color = this.StatusColors.STOP
        }
        if (runStatusObj.value === 1) {
          color = this.StatusColors.RUNNING
        }
        if (color !== oldColor) {
          this.doChangeNodeLinesColor(node, color)
          node.set('statusColor', color)
        }
      }
    },
    doChangeNodeLinesColor (node, color) {
      // 执行 修改节点和 连线的颜色的地方
      if (color !== '') {
        // 执行改变颜色
        node.setStyle(Q.Styles.RENDER_COLOR, color)
        node.setStyle(Q.Styles.RENDER_COLOR_BLEND_MODE, Q.Consts.BLEND_MODE_GRAY)

        let lines = node.get('lines')
        if (lines) {
          for (let i = 0; i < lines.length; i++) {
            this.graph.forEach(item => {
              if (item instanceof Q.ShapeNode && item.get('did') === lines[i]) {
                // console.log('findOne',item)
                if (color === this.StatusColors.RUNNING) {
                  // 启动，线条流动
                  this.flowObj.addFlowing(item, 3, true, item.get('color'))
                } else {
                  // 把层级降低
                  item.zIndex = item.zIndex - 7
                  this.flowObj.removeFlowing(item.id)
                }

                // item.setStyle(Q.Styles.SHAPE_STROKE_STYLE, StatusColors.STOP); // 线条颜色
              }
            })
          }
        }
      }
    },
    loadTextDats (node) {
      let nodeName =  node.get('name')
       window.myapi.do_post('iot/dev/sysReal', { uuid: node.get('did') }).then(resp => {
         if (resp.status === 200 && resp.data.status === 200) {
           let obj = resp.data.data
           if (obj.length > 0) {
             if (nodeName === '实时压力' || nodeName === '实时露点' || nodeName === '进水温度' || nodeName === '出水压力') {
               this.judgeWarnData(node, obj[0].value, nodeName)
             }
             // name不能是数字，只能是字符串
             node.name = obj[0].value + ''
           } else {
             node.name = 'N/A'
           }
         }
      }).finally(() => {
      })
    },
    judgeWarnData (node, data, nodeName) {

      let ifLight = false
      if (nodeName === '实时压力') {
        if (data > this.warnData.setLimitUp3 || data < this.warnData.setLimitDown3) {
          ifLight = true
        } else {
          ifLight = false
        }
      }
      if (nodeName === '进水温度') {
        if (data > this.warnData.setLimitUp2 || data < this.warnData.setLimitDown2) {
          ifLight = true
        } else {
          ifLight = false
        }
      }
      if (nodeName === '出水压力') {
        if (data > this.warnData.setLimitUp1 || data < this.warnData.setLimitDown1) {
          ifLight = true
        } else {
          ifLight = false
        }
      }
      if (nodeName === '实时露点') {
        if (data > this.warnData.setLimitUp0 || data < this.warnData.setLimitDown0) {
         ifLight =  true
        } else {
          ifLight = false
        }
      }

      if (ifLight) {
        node.setStyle(Q.Styles.LABEL_COLOR, 'rgba(238, 17, 17, 0.6)')
        setTimeout(() => {
          node.setStyle(Q.Styles.LABEL_COLOR, 'rgba(238, 17, 17, 1)')
        }, 1111);
      } else {
        node.setStyle(Q.Styles.LABEL_COLOR, '#434343')
      }

    },
    loadWarnPropsRealData (node) {
       window.myapi.do_post('iot/dev/sysReal', { uuid: node.get('did') }).then(resp => {
         let goWarns = false
         if (resp.status === 200 && resp.data.status === 200) {
           let obj = resp.data.data
           if (obj[0].value === 'N/A' && obj[1].value === 'N/A' && obj[2].value === 'N/A' && obj[3].value === 'N/A') {
             this.warnSuccess(node)
             return
           }
           for (let i = 0; i < obj.length; i++) {
             let objElement = obj[i]
             let curName = objElement.keyName
             let upTarget = 0
             let downTarget = 0
             if (curName === '供气总管压力') {
               upTarget = this.warnData.setLimitUp3
               downTarget = this.warnData.setLimitDown3
             }
             if (curName === '冷却供水总管压力') {
               upTarget = this.warnData.setLimitUp1
               downTarget = this.warnData.setLimitDown1
             }
             if (curName === '冷却供水总管温度') {
               upTarget = this.warnData.setLimitUp2
               downTarget = this.warnData.setLimitDown2
             }
             if (curName === '露点') {
               upTarget = this.warnData.setLimitUp0
               downTarget = this.warnData.setLimitDown0
             }
             if (objElement.value > upTarget || objElement.value < downTarget) {
               goWarns = true
               break
             }
           }
           if (goWarns) {
             this.voiceShouldStatus = true
             if (this.warnTimer == null) {
               this.warnError(node)
             }
           } else {
             this.voiceShouldStatus = false
             this.warnSuccess(node)
           }
         }
      }).finally(() => {
      })
    },
    warnSuccess (warn) {
      warn.setStyle(Q.Styles.SHAPE_FILL_COLOR, '#209120')
      warn.setStyle(Q.Styles.SHADOW_COLOR, null)
      warn.setStyle(Q.Styles.SHADOW_BLUR, 0)
      warn.setStyle(Q.Styles.SHAPE_STROKE, 0.3)
      this.stopPlayVoice()
      if (this.warnTimer != null) {
        window.clearInterval(this.warnTimer)
        this.warnTimer = null
      }
    },
    warnError (warn) {
      warn.setStyle(Q.Styles.SHAPE_FILL_COLOR, '#F00')
      warn.setStyle(Q.Styles.SHADOW_COLOR, '#F00')
      warn.setStyle(Q.Styles.SHAPE_STROKE, 0)
      let shineTimer = 0
      // 播放警报声
      this.playWarnVoice()
      this.warnTimer = window.setInterval(() => {
        warn.setStyle(Q.Styles.SHADOW_BLUR, shineTimer)
        if (shineTimer === 16) {
          shineTimer = 0
        }
        shineTimer++
      }, 100)
    },
    playWarnVoice () {
      if (this.voiceObj == null) {
        this.voiceObj = document.getElementById('mmff')
      }
      if (this.warnVoice === '允许警报') {
          this.voiceObj.currentTime = 0
          this.voiceObj.play()
      }
    },
    stopPlayVoice () {
      // 停止播放报警
      if (this.voiceObj == null) {
        this.voiceObj = document.getElementById('mmff')
      }
      this.voiceObj.currentTime = 0
      this.voiceObj.pause()
    },
    // 清除所有定时
    allClearInterval () {
      // 停止滚动定时器33
      this.flowObj.stop()
      this.timers.forEach(item => window.clearInterval(item))
      if (this.drawerTimer) {
        this.closeDrawerTimer()
      }
    }
  }
}

</script>
<style scoped>
  .jjk{
    width: 49%;
    float: left;
    margin-right: 1%
  }
.mainBg {
  width: 100%;
  height: 1000px;
  padding: 5px;
}
.pagee{
  margin-top: 10px;
}

.cann {
  height: 100%;
  width: 100%;
  border: 1px solid #ded9d9;
  background: #EEE;
}

.oneContain {
  width: calc(100% - 10px);
  height: 300px;
}

.titleStyle {
  width: 35%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 15px;
}

.tablll {
  width: 100%;
  padding-right: 3px;
}

.towTail {
  border-top: 1px solid #edeef0;
  border-bottom: 1px solid #edeef0;
  text-align: center;
  background: #f4f5f7;
  adding: 2px;
}

table th,
td {
  border-top: 1px solid #f4f5f7;
  border-bottom: 1px solid #f4f5f7;
  margin: 0px;
  font-size: 12px;
}

table tr {
  margin: 0;
}

.ivu-card-head {
  border-bottom: 1px solid #e8eaec;
  padding: 0px 16px;
  line-height: 1;
  text-align: center;
}

/*状态原点颜色样式start */
.dotGreen {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #0bed89;
  margin: 0 auto;
  width: 14px;
}

.dotRed {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #ed4014;
  margin: 0 auto;
  width: 14px;
}

.dotYellow {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #ffe609;
  margin: 0 auto;
  width: 14px;
}

.dotDefault {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #d5d8da;
  margin: 0 auto;
  width: 14px;
}

/*状态原点颜色样式end */

</style>
